<template>
    <!-- 表单 -->
    <el-form inline>
        <el-form-item label="学生名称" style="width: 20%;">
            <el-input v-model="params.nickName" placeholder="请输入要搜索学生名称" />
        </el-form-item>
        <el-form-item label="班级名称" style="width:20%;">
            <el-select lable="" v-model="params.classroomId" placeholder="请选择班级名称" clearable>
                <el-option v-for="item in classroomSelectList" :key="item.classroomId" :label="item.classroomName"
                    :value="item.classroomId" />
            </el-select>
        </el-form-item>
        <el-form-item label="学校名称" style="width: 20%;">
            <el-input v-model="params.schoolName" placeholder="请输入要搜索学校名称" />
        </el-form-item>
        <el-form-item>
            <el-button @click="onSearch" plain>搜索</el-button>
            <el-button @click="onReset" plain type="info">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table height="526px" :data="studentList">
        <el-table-column align="center" prop="studentId" label="学生id" width="180" />
        <el-table-column align="center" label="班级">
            <template #default="{ row }">
                {{ row.classroomName || '无' }}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="nickName" label="名称" />
        <el-table-column align="center" label="学校">
            <template #default="{ row }">
                {{ row.schoolName || '无' }}
            </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="注册时间" />
        <el-table-column align="center" label="状态">
            <template #default="{ row }">
                <el-tag 
                    :type="row.status === 0 ? 'success' : 'danger'"
                >
                    {{ row.status === 0 ? '正常' : '黑名单' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200px" fixed="right">
            <template #default="{ row }">
                <el-button type="text" @click="onViewDetails(row.studentId)">详情</el-button>
                
                <!-- 正常状态：显示禁言和拉黑按钮 -->
                <template v-if="row.status === 0">
                </template>
                
                <!-- 禁言或拉黑状态：显示恢复按钮 -->
                <template v-else>
                    <el-button type="text" class="green" @click="onRestore(row.studentId)">恢复正常</el-button>
                </template>
                
                <el-button type="text" class="red" @click="onDelete(row.studentId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination background size="small" layout="total, sizes, prev, pager, next, jumper" :total="total"
        v-model:current-page="params.pageNum" v-model:page-size="params.pageSize" :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <student-drawer ref="studentEditRef" @success="onSuccess" :is-details-mode="true"></student-drawer>
</template>

<script setup>
import { reactive, ref, onMounted, provide } from 'vue';
import { getStudentListService, delStudentService, blacklistStudentService, restoreStudentService } from '@/apis/student'
import StudentDrawer from "@/components/drawer/StudentDrawer.vue"
import { getClassroomSelectListService } from '@/apis/classroom'
import { ElMessage } from 'element-plus';

const params = reactive({
    pageNum: 1,
    pageSize: 10,
    nickName: '',
    classroomId: '',
    schoolName: ''
})

const studentEditRef = ref()
const studentList = ref([])
const total = ref(0)

async function getStudentList() {
    const ref = await getStudentListService(params)
    studentList.value = ref.rows
    total.value = ref.total
}
getStudentList()

const classroomSelectList = ref([]);
const refreshKey = ref(0); // 用于强制刷新
async function getClassroomSelectList() {
    try {
        const res = await getClassroomSelectListService();
        classroomSelectList.value = res.data; // ✅ 正确赋值
        refreshKey.value += 1; // 强制刷新下拉框
    } catch (error) {
        console.error("加载教师列表失败:", error);
    }
}
onMounted(() => {
    getClassroomSelectList();
});
provide('classroomList', classroomSelectList);

function onSearch() {
    params.pageNum = 1
    getStudentList()
}

function onReset() {
    params.pageNum = 1
    params.pageSize = 10
    params.nickName = ''
    params.classroomId = ''
    params.schoolName = ''
    getStudentList()
}

function handleSizeChange(newSize) {
    params.pageNum = 1
    getStudentList()
}

function handleCurrentChange(newPage) {
    getStudentList()
}

function onSuccess(service) {
    if (service === 'add') {
        params.pageNum = 1
    }
    getStudentList()
}

async function onDelete(studentId) {
    const isConfirmed = window.confirm("确定要删除该学生吗？");
    if (isConfirmed) {
        // 用户点击确认
        await delStudentService(studentId);
        params.pageNum = 1;
        getStudentList();
    } else {
        // 用户点击取消
        console.log("删除操作已取消");
    }
}

async function onViewDetails(studentId) {
    studentEditRef.value.open(studentId)
}

async function onBlacklist(studentId) {
    try {
        await blacklistStudentService(studentId);
        ElMessage.success('已加入黑名单');
        getStudentList();
    } catch (error) {
        ElMessage.error('操作失败');
    }
}

async function onRestore(studentId) {
    try {
        await restoreStudentService(studentId);
        ElMessage.success('已恢复正常状态');
        getStudentList();
    } catch (error) {
        ElMessage.error('操作失败');
    }
}
</script>

<style scoped>
.green {
    color: #67C23A;
}
.red {
    color: #F56C6C;
}
</style>